<template>
  <view class="help-center">
    <!-- 标题 -->
    <view class="header">
      <text class="title">帮助中心</text>
    </view>

    <!-- 问题分类列表 -->
    <uni-collapse>
      <uni-collapse-item v-for="(category, index) in categories" :key="index" :title="category.name">
        <uni-list>
          <uni-list-item v-for="(question, qIndex) in category.questions" :key="qIndex" 
            :title="question" clickable @click="showAnswer(question)" />
        </uni-list>
      </uni-collapse-item>
    </uni-collapse>

    <!-- 联系客服按钮 -->
    <view class="contact-btn">
      <button type="primary" @click="contactService">联系客服</button>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'

const categories = ref([
  {
    name: '登录问题',
    questions: [
      '如何注册账号？',
      '忘记密码怎么办？',
      '账号被锁定如何解决？'
    ]
  },
  {
    name: '显示问题',
    questions: [
      '图片无法显示怎么办？',
      '视频播放黑屏怎么解决？',
      '界面显示异常如何处理？'
    ]
  },
  {
    name: '功能问题',
    questions: [
      '如何发布内容？',
      '如何修改个人信息？',
      '如何删除已发布内容？'
    ]
  },
  {
    name: '支付问题',
    questions: [
      '支付失败怎么办？',
      '如何申请退款？',
      '支付金额错误如何处理？'
    ]
  }
])

const showAnswer = (question) => {
  uni.showModal({
    title: question,
    content: '这里是问题的详细解答...',
    showCancel: false
  })
}

const contactService = () => {
  uni.makePhoneCall({
    phoneNumber: '400-123-4567'
  })
}
</script>

<style>
.help-center {
  padding: 20px;
  background-color: #f8f8f8;
  min-height: 100vh;
}

.header {
  margin-bottom: 20px;
  text-align: center;
}

.title {
  font-size: 20px;
  font-weight: bold;
  color: #333;
}

.contact-btn {
  position: fixed;
  bottom: 30px;
  left: 20px;
  right: 20px;
}

button[type="primary"] {
  background-color: #007AFF;
  border-radius: 8px;
}
</style>
